ScrollSpy হল একটি বুটস্ট্র্যাপ ৫ ফিচার, যা স্ক্রোলিংয়ের সময় পেজের নির্দিষ্ট সেকশনের উপর ট্র্যাকিং করতে সাহায্য করে। এটি সাধারণত নেভিগেশন বার বা সাইডবারে ব্যবহৃত হয়, যেখানে ইউজার যখন পেজ স্ক্রল করে, তখন সেই সেকশনটি স্বয়ংক্রিয়ভাবে হাইলাইট হয়। এটি সাইটে ইন্টার্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে ব্যবহৃত হয়।
ScrollSpy ইউজারকে জানায় যে, তিনি বর্তমানে কোন সেকশনে আছেন, যা তার নেভিগেশন বা কন্টেন্টে থাকা পছন্দের সেকশনগুলির সাথে সম্পর্কিত।
ScrollSpy স্বয়ংক্রিয়ভাবে স্ক্রল ইভেন্ট পর্যবেক্ষণ করে এবং পেজের সেকশনের মধ্যে কোনটি স্ক্রল করা হচ্ছে তা ট্র্যাক করে। এটি সাধারণত কন্টেইনার বা নেভিগেশন বারের সাথে ব্যবহার করা হয় এবং নির্দিষ্ট সেকশনের উপর ভিত্তি করে সেই সেকশনের লিঙ্কগুলো হাইলাইট করা হয়।
বুটস্ট্র্যাপ ৫-এ ScrollSpy ব্যবহার করার জন্য নিচের ধাপগুলো অনুসরণ করতে হবে:
data-bs-spy="scroll" এবং data-bs-target="#navbarExample" ব্যবহার করা হয়।id অ্যাট্রিবিউট ব্যবহার করতে হবে যাতে ScrollSpy সেগুলির উপর নজর রাখতে পারে।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap ScrollSpy Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<!-- Navbar -->
<nav id="navbar-example" class="navbar navbar-light fixed-top bg-light">
<a class="navbar-brand" href="#">ScrollSpy Example</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</nav>
<div class="container" style="margin-top: 80px;">
<div id="section1" class="pt-5">
<h2>Section 1</h2>
<p>This is section 1. Scroll down to navigate.</p>
</div>
<div id="section2" class="pt-5">
<h2>Section 2</h2>
<p>This is section 2. Scroll down to navigate.</p>
</div>
<div id="section3" class="pt-5">
<h2>Section 3</h2>
<p>This is section 3. Scroll down to navigate.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
data-bs-spy="scroll": এটি ScrollSpy সক্রিয় করার জন্য ব্যবহৃত হয়। এর মাধ্যমে পেজের স্ক্রল পজিশন ট্র্যাক করা হয়।data-bs-target="#navbar-example": এটি কনফিগার করে যে কন্টেইনার বা নেভিগেশন বারটি ScrollSpy ট্র্যাক করবে। এখানে #navbar-example নেভিগেশন বারটির আইডি।id="section1": সেকশনের প্রতিটি সেকশন আইডি ব্যবহার করে নির্দিষ্ট অংশে স্ক্রল করার জন্য এটি কার্যকর হয়।nav-link active: যখন একটি সেকশন স্ক্রল হয়, তখন তার লিঙ্কটি active ক্লাসে পরিবর্তিত হয়ে যায়। ফলে ইউজার বুঝতে পারে যে কোন সেকশনে তিনি আছেন।data-bs-offset="0": স্ক্রল পজিশনের জন্য একটি অফসেট প্রদান করতে পারে, এটি কন্টেইনারের উপরের দিক থেকে কতটা দূরে স্ক্রল শুরু হবে তা নির্ধারণ করে।tabindex="0": স্ক্রল স্পাই কার্যকর করার জন্য এই অ্যাট্রিবিউটটি প্রয়োজন, এটি পেজের কন্টেইনারে স্ক্রল ট্র্যাকিং শুরু করতে সহায়ক।ScrollSpy বুটস্ট্র্যাপ ৫-এর একটি শক্তিশালী ফিচার যা স্ক্রলিংয়ের সময় ইউজারের অবস্থান এবং সেকশনের তথ্য ট্যাক করে এবং সেই অনুযায়ী নেভিগেশন বার হাইলাইট করে। এটি রেসপন্সিভ এবং ইন্টারঅ্যাকটিভ ডিজাইন তৈরির জন্য খুবই কার্যকরী।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
